<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<%
	request.setAttribute("webRoot", request.getContextPath());
%>
<title>jqGrid.Bootstrap</title>

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- <script src="${webRoot}/statics/jqGrid/js/jquery-1.9.0.min.js"></script>    -->
<!-- <script src="jquery-ui/js/jquery-ui-1.9.2.custom.min"></script>  -->

<!-- jqGrid -->
<script src="${webRoot}/statics/jqGrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript">
</script>
<!-- 
<script src="${webRoot}/statics/jqGrid/js/jquery.jqGrid.min.js"></script>
 -->
<script src="${webRoot}/statics/jqGrid/src/jquery.jqGrid.js"></script>


<!-- jqGrid setup -->
<script>
      //<![CDATA[
        $(document).ready(function() {
            var mydata = [
                    { id: "1", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "2", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "4", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "300.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
                    { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "300.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "13", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "14", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "15", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "16", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "17", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "18", invdate: "2007-09-06", name: "test6", note: "note6", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "19", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "20", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "21", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "22", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
                    { id: "23", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "24", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                ],
                grid = $("#jqGrid01");

            grid.jqGrid({
               // datatype: 'local',
               // data: mydata,
               	datatype: "json",
               	url:"${webRoot}/test/simple/queryTestSimple.json",
                colNames: ['Inv No', 'Date', 'Client A', 'Client B', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
                colModel: [
                    { name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int' },
                    { name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
                        formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'
                    },
                    { name: 'name', index: 'name', width: 70,
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //合并单元格
                           // console.log(rowId);//id
                           // console.log(tv);//对应的值
                           // console.log(rawObject);// 数据
                           // console.log(cm);//配置
                           // console.log(rdata);//数据
                            return 'id=\'name' + rowId + "\'";
                            //if (Number(rowId) < 5) { return ' colspan=2' }
                        }
                    },
                    { name: 'nameB', index: 'nameB', width: 70,
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //if (Number(rowId) < 5) { return ' style="display:none;"' }
                        }
                    },
                    { name: 'amount', index: 'amount', width: 100, formatter: 'number', align: 'right',
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //合并单元格
                            return 'id=\'amount' + rowId + "\'";
                        }
                    },
                    { name: 'tax', index: 'tax', width: 70, formatter: 'number', align: 'right',
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //合并单元格
                            return 'id=\'tax' + rowId + "\'";
                        }
                    },
                    { name: 'total', index: 'total', width: 120, formatter: 'number', align: 'right',
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //合并单元格
                            return 'id=\'total' + rowId + "\'";
                        }
                    },
                    { name: 'closed', index: 'closed', width: 110, align: 'center', formatter: 'checkbox',
                        edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' }
                    },
                    { name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
                        edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' },
                        //①给当前想合并的单元格设置id
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            return 'id=\'ship_via' + rowId + "\'";
                        }
                    },
                    { name: 'note', index: 'note', width: 100, sortable: false }
                ],
                rowNum: 15,
                rowList: [10, 15, 20, 30],
                pager: '#jqGridPager01',
                gridview: true,
                rownumbers: true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: 'desc',
                caption: '用户管理',
                height: '100%',
                autowidth:true,
                gridComplete: function() {
                    //②在gridComplete调用合并方法
                    var gridName = "jqGrid01";
                    Merger(gridName, 'amount');
                    Merger(gridName, 'tax');
                    Merger(gridName, 'total');
                    Merger(gridName, 'name');
                    Merger(gridName, 'ship_via');
                },
                jsonReader:{ //server返回Json解析设定   
                    root: function(data){
                    	data=data["result"]
                    	
                    	return data["content"]
                    	},//"com.dc.commons.views.ModelAndViewBuilder.RESULT.result.content", //对于json中数据列表   
                    page:function(data){
                    	data=data["result"]
                    	return data["number"]
                    },// "com.dc.commons.views.ModelAndViewBuilder.RESULT.result.number",   
                    total:function(data){
                    	data=data["result"]
                    	return data["totalPages"]
                    }, //"com.dc.commons.views.ModelAndViewBuilder.RESULT.result.totalPages",   
                    records:function(data){
                    	data=data["result"]
                    	return data["totalElements"]
                    },// "com.dc.commons.views.ModelAndViewBuilder.RESULT.result.totalElements",  
                    repeatitems: false,   
                }
              

            });
            
            $(window).resize(function(){
            	$("#jqGrid01").setGridWidth($(window).width());
            	$("#jqGridPager01").setGridWidth($(window).width());

            });

            //公共调用方法
            function Merger(gridName, CellName) {
                //得到显示到界面的id集合
                var mya = $("#" + gridName + "").getDataIDs();
                //当前显示多少条
                var length = mya.length;
                for (var i = 0; i < length; i++) {
                    //从上到下获取一条信息
                    var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
                    //定义合并行数
                    var rowSpanTaxCount = 1;
                    for (j = i + 1; j <= length; j++) {
                        //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                        var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
                        if (before[CellName] == end[CellName]) {
                            rowSpanTaxCount++;
                            $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
                        } else {
                            rowSpanTaxCount = 1;
                            break;
                        }

                        $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
                    }
                }
            }
            
            var template1;
            var template2;
            function pageInit(){ 
            	 template1 = { 
            			"groupOp": "AND",
            			"rules": [ 
            			           { "field": "b.name", "op": "bw", "data": "Client 1" },
            			           { "field": "a.amount", "op": "gt", "data": "20"} 
            			         ] 
            	}; 
            	 template2 = { 
            			"groupOp": "AND", 
            			"rules": [ 
            			           { "field": "b.name", "op": "eq", "data": "Client 2" }, 
            			           { "field": "a.id", "op": "le", "data": "10"}
            			         ] 
            	} ;
            }
            pageInit()
            jQuery("#jqGrid01").jqGrid('navGrid','#jqGridPager01', 
            		{edit:false,add:false,del:false}, 
            		{}, {}, {}, 
            		{multipleSearch:true, multipleGroup:true, showQuery: true,
            			// set the names of the template 
            			"tmplNames" : ["Template One", "Template Two"], 
            			// set the template contents 
            			"tmplFilters": [template1, template2]
            		} );
           
        });
        
        
        //]]>

    </script>

	
	<!-- jquery-ui CSS -->
	<link
		href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
		rel="stylesheet">
	<!-- <link href="jquery-ui/css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet">  -->
	
	<!-- Bootstrap core CSS -->
	<link rel="stylesheet"
		href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<!-- <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> -->
	
	<!-- standard jqGrid CSS -->
	<link href="${webRoot}/statics/jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
	
	<!-- Custom styles for this template -->
	<style type="text/css">
		
	body {
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: #bbb;
		height:100%;
		width:100%;
	}
	
	#content {
		width: 100%; 
		height: 100%; 
	}
	
	.navbar {
		margin-bottom: 30px;
	}
	
	.jumbotron {
		font-size: inheret;
		font-weight: 200;
		line-height: 1;
		color: inherit;
	}	
	</style>
	
	<!-- custom CCS override -->
	<link href="${webRoot}/statics/jqGrid/css/jqGrid.bootstrap.css" rel="stylesheet" />
	
	
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	      <script src="../../assets/js/html5shiv.js"></script>
	      <script src="../../assets/js/respond.min.js"></script>
	    <![endif]-->

</head>

<body>
		<!-- Main component for a primary marketing message or call to action -->
			<div class="hero-unit">
				
				<div id="content">			
					<table id="jqGrid01"></table>
					<div id="jqGridPager01"></div>								
				</div>				
				
			</div>
			

	</div>
	<!-- /container -->


	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script
		src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>